 <template>
  <div>
    <h1>{{ msg }}</h1>
    <div>
      <p>映射取值count: [{{ count }}]</p>
      <p>箭头函数映射取值count: [{{ count2 }}]</p>
      <p>映射取值name: [{{ name }}]</p>
      <p>别名映射取值name: [{{ nameAlias }}]</p>
      <p>函数映射取值: [{{ countplustempcount }}]</p>
      <p>其他函数映射取值: [{{ countplustempcount2 }}]</p>
    </div>
  </div>
</template> 

<script>
import { mapState } from "vuex";
export default {
  name: "Test3",
  props: {
    msg: String,
  },
  data() {
    return {
      temp: "hello",
      tempcount: 1,
      tempcount2: 2,
    };
  },
  computed: mapState({
    // 箭头函数可使代码更简练
    count2: (state) => state.count,
    name: (state) => state.name, // function   映射 this.name 为 store.state.name的值
    // 传字符串参数 映射 this.count 为 store.state.count的值
    count: "count",
    nameAlias: "name", // string   映射 this.nameAlias 为 store.state.name的值
    //为了能够使用 `this` 获取局部状态，必须使用常规函数
    countplustempcount: function (state) {
      return this.tempcount + state.count;
    },
    countplustempcount2(state) {
      return this.tempcount2 + state.count;
    },
  }),
};
</script>
